<template>
    <view class="container">
        <!-- @scrolltolower="scrolltolower" -->
        <scroll-view scroll-y="true" class="scroll">
            <view class="detail-head">
                <view class="head-top row">
                    <view class="head-info">
                        <view class="title">
                            {{ dataInfo?.headInfo?.companyName }}
                        </view>
                        <view class="name">
                            员工库总人数：{{ dataInfo?.headInfo?.staffCount }}人
                        </view>
                    </view>
                </view>
<!--                <view class="company-box">-->
<!--                    <view class="company-customer">-->
<!--                        <view>-->
<!--                            标签：-->
<!--                        </view>-->
<!--                        <image src="@/static/home/right-arrow.png" class="arrow-img"/>-->
<!--                    </view>-->
<!--                    <view class="company-contacts">-->
<!--                        <view class="tab-list">-->
<!--                            <view class="tab-i" v-for="(item,index) in dataInfo.lable" :key="index">{{ item }}</view>-->
<!--                        </view>-->
<!--                    </view>-->
<!--                </view>-->
            </view>
            <view>
                <view class="tab-radius">
                    <tab-radius
                        divided="100%"
                        :list="['签单', '记录']"
                        :active="analysisActive"
                        @change="onInsuranceTab"
                    />
                </view>
                <noData v-if="signList.length === 0" />
                <view class="record-list" v-if="Number(analysisActive) === 0">
                    <view class="record-i" v-for="(item,index) in signList" :key="index" @click="goSign(item)">
                        <view class="i-top">
                            <view class="align-flex">
                                <view class="top-title">
                                    {{ item.productName }}
                                </view>
                                <view class="top-state-i" v-if="Number(item.withoutDeduction) === 1 && (item.productName === '长期保' || item.productName == '日日保')">
                                    超出30天未产生保费
                                </view>
                            </view>
                            <view class="top-account">
                                <view class="account-info">
                                    <view class="account-num">
                                        <text class="account-unit">￥</text>
                                        {{ item.money }}
                                    </view>
                                    <view class="account-balance">
                                        {{ item.productName=== '子弹发薪' ? '累计销售':item.productName==='电子签'?'累计充值':item.productName==='日日保'?'累计保费':item.productName==='长期保'?'累计保费':'' }}
                                    </view>
                                </view>
                                <image
                                    class="top-account-img"
                                    src="../../static/home/orange-subscript.png"
                                />
                            </view>
                        </view>
                        <view class="i-info">
                            <view class="info-row">
                                <view class="info-row-left"> 负责人： </view>
                                <text class="info-row-right">{{ item.saleName }}</text>
                            </view>
                            <view class="info-row">
                                <view class="info-row-left"> 开通时间： </view>
                                <text class="info-row-right"
                                    >{{ item.openTime }}</text
                                >
                            </view>
                        </view>
                    </view>
                </view>
            </view>
          <noData v-if="Number(analysisActive) === 1" :online="true"/>
          <view v-if="Number(analysisActive) === 1">
            <takeNote></takeNote>
          </view>
        </scroll-view>
    </view>
</template>
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import tabRadius from '@/components/tab-radius/tab-radius.vue'
import { signStartList, GetSignStartDto, GetSignStartListDto } from '@/api/signing'
import user from '@/utils/user'
import takeNote from '@/packageRemind/pages/customer-detail/take-notes/take-notes.vue'
import noData from '@/components/no-data/no-data.vue'
const analysisActive = ref(0)
const companyId = ref()
const dataInfo = ref({} as GetSignStartDto)
const signList = ref([] as GetSignStartListDto[])
const customer = ref()
const dealId = ref()
const userInfo = ref()
onLoad(async (options) => {
    console.log(options, 'options')
    await user.waitLogin()
    userInfo.value = await user
    console.log(userInfo, 'userInfo')
    console.log(userInfo.value.role, 'userInfo.role')
    companyId.value = options.id
    customer.value = options.customer
    dealId.value = options.dealId
    getSignStartList()
})

const getSignStartList = async () => {
    const result = await signStartList({
        companyId: companyId.value
    })
    console.log(result, 'result列表')
    dataInfo.value = result
    if(userInfo.value.role !== 2) {
      signList.value = result.list
    } else {
      signList.value = result.list.filter(item =>
      item.isJump === "0"
    )
    }
}

// tab日日保胶囊回调
const onInsuranceTab = (index: number) => {
    console.log(index, '回调1')
    analysisActive.value = index
}
// 跳转回签单
const goSign = (e:any) => {
  console.log(e.dealId , '这个是什么')
  console.log(e.isJump, '签单内容', customer.value)
  if(e.isJump === '0'){
  let iden = customer.value == 'pay'? '子弹发薪' : customer.value == 'ele'? '电子签' : customer.value == 'day'? '日日保' : customer.value == 'long'? '长期保' : ''
  if(customer.value){
    if (iden === e.productName) {
      wx.navigateBack({
        delta: 1
      });
    }
  }
  if (e.productName == '子弹发薪' && iden !== e.productName){
    uni.navigateTo({
      url: '/packageRemind/pages/pay-detail/index?id=' + companyId.value + '&dealId=' + (e.dealId || dealId.value)
    })
  } else if (e.productName == '电子签' && iden !== e.productName){
    uni.navigateTo({
      url: '/packageRemind/pages/electron-detail/electron-detail?id=' + companyId.value + '&dealId=' + (e.dealId || dealId.value)
    })
  } else if (e.productName == '日日保' && iden !== e.productName){
    uni.navigateTo({
      url: '/packageRemind/pages/insurance-detail/index?id=' + companyId.value + '&dealId=' + (e.dealId || dealId.value)
    })
  }else if (e.productName == '长期保' && iden !== e.productName){
    uni.navigateTo({
      url: '/packageRemind/pages/longInsurance-detail/index?id=' + companyId.value + '&dealId=' + (e.dealId || dealId.value)
    })
  }
  }else {
    return
  }
}
</script>
<style lang="scss" scoped>
.container {
    // min-height: 100vh;
    background: #fafafc;
    padding-bottom: 0;
}
.tab-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tab-radius {
    margin-top: 53rpx;
    padding: 0rpx 30rpx;
}
.scroll {
    height: 100vh;
}
.record {
    padding: 0 30rpx;
    @include flex-between;
    color: $grey;
    font-size: $font-normal;
    margin-top: 30rpx;
    .record-box {
        @include flex-between;
        color: #565868;
        font-size: $font-normal;
    }
    .sort-img {
        width: 28rpx;
        height: 28rpx;
        margin-left: 8rpx;
    }
}
.record-list {
    padding: 0 30rpx;
    margin-top: 34rpx;
    .record-i {
        padding: 30rpx;
        background: #ffffff;
        border-radius: 16rpx;
        margin-bottom: 30rpx;
    }
    .i-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 1rpx solid #f4f4f7;
        padding-bottom: 50rpx;
    }
    .top-title {
        font-size: $font-medium;
        font-weight: bold;
        color: $black;
    }
    .top-account {
        position: relative;
        width: 200rpx;
        color: #ff7642;
    }
    .account-num {
        font-size: $font-large;
        font-weight: bold;
        display: flex;
        align-items: baseline;
        text-align: right;
        justify-content: flex-end;
    }
    .account-unit {
        font-size: $font-small;
    }
    .account-balance {
        text-align: right;
        color: $font-small;
    }
    .account-info {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
    }
    .account-info-active {
        color: #9497b1 !important;
    }
    .top-account-img {
        position: absolute;
        width: 72rpx;
        height: 72rpx;
        top: 0;
        right: 0;
        z-index: 0;
    }
    .i-info {
        margin-top: 30rpx;
    }
    .info-row {
        display: flex;
    }
    .info-row-left {
        width: 138rpx;
        color: $grey;
        font-size: $font-normal;
        margin-bottom: 17rpx;
    }
    .info-row-right {
        color: $black;
        font-size: $font-normal;
        margin-bottom: 17rpx;
    }
}
.head {
    width: 690rpx;
    margin: 0 auto;
}
.user-label {
}
.user-avatar {
    @include avatar(70rpx);
    border: 1rpx solid #e2e6f1;
    margin-right: 15rpx;
}
.user {
    display: flex;
    color: $grey;
    align-items: flex-start;
    justify-content: space-between;
}
.head-user-left {
    display: flex;
    align-items: flex-start;
}
.head-user-right {
    margin-top: 10rpx;
    width: 190rpx;
    height: 60rpx;
    line-height: 60rpx;
    padding-left: 26rpx;
    background: rgba(255, 126, 104, 1);
    color: #ffffff;
    font-size: 24rpx;
    border-radius: 30rpx;
    .extension {
        width: 60rpx;
        height: 60rpx;
        float: right;
    }
}
.user-label {
    margin: 10rpx 0 0 16rpx;
    padding: 2rpx 15rpx;
    box-sizing: border-box;
    background: rgba(0, 214, 121, 0.1);
    color: #00d679;
    font-size: 24rpx;
    border-radius: 19rpx;
}
.user-name {
    font-size: $font-medium;
    font-weight: bold;
    color: $black;
    margin-bottom: 6rpx;
}
.basic {
    width: 690rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    position: relative;
    height: 154rpx;
}
.basic-bg {
    position: absolute;
    width: 690rpx;
    height: 154rpx;
}
.basic-data {
    top: 40rpx;
    width: 100%;
    @include padding(0 58rpx);
    position: absolute;
    display: flex;
    justify-content: space-between;
    color: white;
}
.basic-msg {
    font-size: $font-small;
}
.basic-msg-number {
    margin-top: 16rpx;
    font-size: 30rpx;
    .number {
        font-size: $font-large;
        font-weight: bold;
    }
}

.helper {
    display: grid;
    grid-template-columns: 4fr 4fr 4fr;
    grid-template-rows: repeat(auto-fill);
    grid-gap: 24rpx;
    padding: 20rpx;
    align-items: center;

    .grid {
        background: #f9f9fa;
        padding: 32rpx;
        text-align: center;
        border-radius: 8rpx;
    }
    .grid-title .bold {
        font-size: $font-large;
        font-weight: bold;
    }
    .grid-descibe {
        color: $grey;
        font-size: $font-small;
    }
    .grid-descibe .bold {
        color: $green;
        font-weight: bold;
        margin: 0 4rpx;
    }
}
.helper-title {
    text-align: center;
}
.customer {
    background: #f9f9fa;
    border-radius: 8rpx;
    padding: 30rpx;
    margin-top: 24rpx;
}
.customer-i {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.customer-title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 350rpx;
    font-size: $font-medium;
    font-weight: bold;
}
.customer-business {
    font-size: 24rpx;
    color: #00d679;
}
.customer-msg {
    margin-top: 24rpx;
    color: #202536;
}
.customer-msg-title {
    color: $grey;
}
.block-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24rpx;
}

.select-sort {
    color: #9497b1;
    font-size: 28rpx;
    display: flex;
    align-items: center;
}
.just-image {
    width: 25rpx;
    height: 25rpx;
    margin-left: 5rpx;
}
.just-image-active {
    transform: rotateX(-180deg);
}

.search-box {
    padding: 0;
}
.tab-list{
    display: flex;
    align-items: center;
    .tab-i{
        padding: 8rpx 15rpx;
        background: #F4F4F7;
        border-radius: 8rpx;
        color: #565868;
        font-size: 24rpx;
    }
}
.top-state-i{
    font-size: $font-base;
    padding: 5rpx 15rpx;
    border-radius: 30rpx;
    margin-right: 16rpx;
    background: rgba(255, 181, 55, 0.1020);
    color: #FFA814;
    margin-left: 34rpx;
}
</style>
